<template>
  <div class="book-detail">
    <div class="book-intro">
      <div class="cover-box">
        <img v-if="book.cover_path" :src="book.cover_path" alt="熊猫书屋、封面" />
      </div>
      <div class="intro-box">
        <div class="title">{{ book.title }}</div>
        <div class="author">作者：{{ book.author }}</div>
        <div class="sataus">状态：已完结</div>
        <div class="category">分类：{{ book.type_name }}</div>
        <div class="intro">作品简介：</div>
        <div class="intro-text">{{ book.description }}</div>
      </div>
    </div>
    <!-- 章节列表 -->
    <div class="orders" v-if="book && book.chapters && book.chapters.length">
      <div class="title">章节列表</div>
      <div class="item" v-for="item in book.chapters" :key="item.id" @click="goToChapter(item)">{{ item.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getBookDetail } from "@/api/books";

const route = useRoute();
const router = useRouter();
const book = ref({});
const loading = ref(false);

// 获取书籍详情
const loadBookDetail = async () => {
  try {
    loading.value = true;
    const response = await getBookDetail(route.params.id);
    if (response.data.cover_path) {
      response.data.cover_path = response.data.cover_path.replace('public/cover', import.meta.env.VITE_FILE_COVER);
    }
    book.value = response.data;
  } catch (error) {
    console.error("获取书籍详情失败:", error);
  } finally {
    loading.value = false;
  }
};

// 跳转到阅读页面
const goToChapter = (chapterInfo) => {
  router.push(`/reader/${route.params.id}/${chapterInfo.id}`);
};

onMounted(() => {
  loadBookDetail();
});
</script>

<style lang="scss" scoped>
.book-intro {
  display: flex;
  padding: 14px;
  .cover-box {
    width: 130px;
    flex-shrink: 0;
    margin-right: 8px;
    border-radius: 4px;
    img {
      width: 100%;
      display: block;
      border-radius: 4px;
    }
  }
  .intro-box {
    flex: 1;
    font-size: 14px;
    .title {
      font-size: 18px;
      font-weight: 700;
    }
    .author {
    }
    .sataus {
    }
    .category {
    }
    .intro {
    }
    .intro-text {
      text-indent: 16px;
    }
  }
}
.orders {
  padding: 14px 14px 44px;
  text-align: left;
  font-size: 16px;
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
  }
  .item {
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px dashed #ccc;
  }
}
</style>
